<template>
  <div class="sidebar">
    <el-menu
      :default-active="activeMenu"
      class="el-menu-vertical"
      :collapse="false"
      background-color="#304156"
      text-color="#bfcbd9"
      active-text-color="#409EFF"
      :router="true"
    >
      <!-- 工作台 -->
      <el-menu-item index="/main/dashboard">
        <el-icon><Odometer /></el-icon>
        <span>工作台</span>
      </el-menu-item>

      <!-- 签约管理 -->
      <el-sub-menu index="contract">
        <template #title>
          <el-icon><Document /></el-icon>
          <span>签约管理</span>
        </template>
        <el-menu-item index="/main/contract_wait">
          <el-icon><Clock /></el-icon>
          <span>待签约管理</span>
        </el-menu-item>
        <el-menu-item index="/main/contract_record">
          <el-icon><Files /></el-icon>
          <span>签约记录</span>
        </el-menu-item>
      </el-sub-menu>

      <!-- 服务管理 -->
      <el-sub-menu index="service">
        <template #title>
          <el-icon><Service /></el-icon>
          <span>服务管理</span>
        </template>
        <el-menu-item index="/main/goToPending">
          <el-icon><Loading /></el-icon>
          <span>待办服务</span>
        </el-menu-item>
        <el-menu-item index="/main/goToRecord">
          <el-icon><Checked /></el-icon>
          <span>服务记录</span>
        </el-menu-item>
      </el-sub-menu>

      <!-- 住民管理 -->
      <el-sub-menu index="resident">
        <template #title>
          <el-icon><User /></el-icon>
          <span>住民管理</span>
        </template>
        <el-menu-item index="/main/ResidentManagement">
          <el-icon><UserFilled /></el-icon>
          <span>住民信息</span>
        </el-menu-item>
        <el-menu-item index="/main/ResidentCreate">
          <el-icon><Plus /></el-icon>
          <span>新增住民</span>
        </el-menu-item>
      </el-sub-menu>

      <!-- 消息管理 -->
      <el-sub-menu index="message">
        <template #title>
          <el-icon><Message /></el-icon>
          <span>消息管理</span>
        </template>
        <el-menu-item index="/main/myMessage">
          <el-icon><ChatDotRound /></el-icon>
          <span>我的消息</span>
        </el-menu-item>
        <el-menu-item index="/main/myAnnouncement">
          <el-icon><Bell /></el-icon>
          <span>我的公告</span>
        </el-menu-item>
        <el-menu-item index="/main/system/systemAnnouncement">
          <el-icon><Notification /></el-icon>
          <span>系统公告</span>
        </el-menu-item>
      </el-sub-menu>

      <!-- 资料管理 -->
      <el-sub-menu index="data">
        <template #title>
          <el-icon><Folder /></el-icon>
          <span>资料管理</span>
        </template>
        <el-menu-item index="/main/goToMedicine">
          <el-icon><FirstAidKit /></el-icon>
          <span>医疗服务</span>
        </el-menu-item>
      </el-sub-menu>

      <!-- 系统管理 -->
      <el-sub-menu index="system">
        <template #title>
          <el-icon><Tools /></el-icon>
          <span>系统管理</span>
        </template>
        <el-menu-item index="/main/InstitutionManagement">
          <el-icon><OfficeBuilding /></el-icon>
          <span>机构管理</span>
        </el-menu-item>
        <el-menu-item index="/main/RoleManagement">
          <el-icon><Key /></el-icon>
          <span>角色管理</span>
        </el-menu-item>
      </el-sub-menu>

      <!-- 住民地图 -->
      <el-menu-item index="/main/resident-map">
        <el-icon><LocationInformation /></el-icon>
        <span>住民地图</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import {
  Odometer,
  Document,
  Clock,
  Files,
  Service,
  Loading,
  Checked,
  FirstAidKit,
  User,
  UserFilled,
  Plus,
  Message,
  ChatDotRound,
  Bell,
  Notification,
  Folder,
  Tools,
  OfficeBuilding,
  Key,
  LocationInformation
} from '@element-plus/icons-vue'

const route = useRoute()

// 计算当前激活的菜单项
const activeMenu = computed(() => {
  return route.path
})
</script>

<style scoped>
.sidebar {
  height: 100%;
  background-color: #304156;
}

.el-menu-vertical {
  height: 100%;
  border-right: none;
}

.el-menu--vertical .el-menu-item {
  padding-left: 20px !important;
}

.el-menu--vertical .el-sub-menu .el-menu-item {
  padding-left: 40px !important;
  background-color: #263445 !important;
}

.el-menu--vertical .el-sub-menu .el-menu-item:hover {
  background-color: #48576a !important;
}

.el-sub-menu .el-sub-menu__title {
  padding-left: 20px !important;
}

/* 自定义滚动条样式 */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: #2c3e50;
}

::-webkit-scrollbar-thumb {
  background: #5a6c7d;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #7f8c8d;
}
</style>